<template>
  <div id="commodityDetail">
   <!--  <div class="header">
      <div class="icon-left" @click="$router.goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/>
			</div>
        商品详情
        <div style="width: 40px; opacity: 0;" @tap="shareShow = true">...</div>
      </div> -->
     <!--  <div class="header-null"></div> -->
      <div class="banner">
       <Carousel height="auto"  arrow="never" :autoplay-speed="speed" autoplay  dots="none"   loop>
          <CarouselItem   v-for="(item,index) in carousel"  :key="item.id">
            <img style="width: 100%;height: 100%;" :src="item.src" alt="">
          </CarouselItem>
           
        </Carousel>
      </div>
      <div class="detail-text">
        <div class="detail-text-title">
          {{info.commodityName}}
        </div>
        <div class="detail-text-desc">
          {{info.commodityContent}}
        </div>
        <div class="detail-text-money">
          <div>
            <span>￥{{info.discountPrice}}</span>
            <!--  <span>￥{{info.discountPrice}}</span>	-->
          </div>
          <!--  <div>
					担保：{{info.guaranteePrice == null ? '0' : info.guaranteePrice}}
				  </div> -->
        </div>
        <!-- 	<div class="detail-text-bottom">
				<div>快递：{{info.expressFee}}元</div>
				<div>{{info.yieldly}}</div>
				<div>销量：{{info.salesVolume == null ? 0 : info.salesVolume}}</div>
			</div> -->
      </div>
      <!--详情信息-->
      <div class="detail-info">
        <div class="borderLine">
          <div class="boxleft">
            品牌：{{info.classifyName}}
          </div>
          <div class="boxright">
            名称：{{info.commodityName}}
          </div>
        </div>
        <div class="borderLine">
          <div class="boxleft">
            材质：{{info.commodityType}}
          </div>
          <div class="boxright">
            规格：50*50
          </div>
        </div>
        <div class="borderLine">
          <div class="boxleft">
            净重：500g
          </div>
          <div class="boxright">
            场景：玄关、客厅、卧室等场所
          </div>
        </div>
        <div class="good_img">
          <img src="https://wx2.sinaimg.cn/mw690/005zpxwhly1fyz6c0xehcj30g50h50ty.jpg" alt="">
			</div>
        </div>
        <!-- 	<div class="detail-attribute" @click="show = true" v-if="shopShow || !commodityStatus">
			<div>请选择&nbsp;&nbsp;属性</div>
			<div>
				<img src="../../static/img/icon/my_icon/arrow@2x.png"/>
			</div>
		</div> -->
        <!-- 	<div class="detail-content">
			<div class="detail-content-tab">
				<div class="detail-content-tab-item" v-for="(item, index) in index" @click="tabItem(index)">
					<div :class="{'detail-content-tab-item-name': true, 'active':index==tabId}" :data-id="index">
						{{item}}
					</div>
				</div>
			</div>
			<div class="detail-content-body" v-if="tabId == 0">
				<div v-html="info.commodityContent"></div>
			</div>
			<div class="detail-content-body1"  v-if="tabId == 1">
				<div class="detail-content-body1-tab">
					<div :class="{'detail-content-body1-tab-item': true, 'active': index==tabIndex}" v-for="(item,index) in index2" @click="tabItem1(index)">
						{{item.name}}({{item.num}})
					</div>
				</div>
				<div class="detail-content-body1-comment" v-if="tabIndex == 0">
					<div class="detail-content-body1-comment-item" v-for="(item, index) in index2[0].evaluateList">
						<div class="detail-content-body1-top">
							<img :src="item.titleUrl"/>
							<div>
								<div>{{item.commodityName}}</div>
								<div></div>
							</div>
						</div>
						<div style="color: #7B7B7B;">
							{{item.createdDate.split(' ')[0]}}&nbsp;&nbsp;{{item.attributeName}}:{{item.sortName}}
						</div>
						<div v-html="item.evaluateContent">
							
						</div>
					</div>
				</div>
				<div class="detail-content-body1-comment" v-if="tabIndex == 1">
					<div class="detail-content-body1-comment-item" v-for="(item, index) in index2[1].evaluateList">
						<div class="detail-content-body1-top">
							<img :src="item.titleUrl"/>
							<div>
								<div>{{item.commodityName}}</div>
								<div></div>
							</div>
						</div>
						<div style="color: #7B7B7B;">
							{{item.createdDate.split(' ')[0]}}&nbsp;&nbsp;{{item.attributeName}}:{{item.sortName}}
						</div>
						<div v-html="item.evaluateContent">
							
						</div>
					</div>
				</div>
				<div class="detail-content-body1-comment" v-if="tabIndex == 2">
					<div class="detail-content-body1-comment-item" v-for="(item, index) in index2[2].evaluateList">
						<div class="detail-content-body1-top">
							<img :src="item.titleUrl"/>
							<div>
								<div>{{item.commodityName}}</div>
								<div></div>
							</div>
						</div>
						<div style="color: #7B7B7B;">
							{{item.createdDate.split(' ')[0]}}&nbsp;&nbsp;{{item.attributeName}}:{{item.sortName}}
						</div>
						<div v-html="item.evaluateContent">
							
						</div>
					</div>
				</div>
				<div class="detail-content-body1-comment" v-if="tabIndex == 3">
					<div class="detail-content-body1-comment-item" v-for="(item, index) in index2[3].evaluateList">
						<div class="detail-content-body1-top">
							<img :src="item.titleUrl"/>
							<div>
								<div>{{item.commodityName}}</div>
								<div></div>
							</div>
						</div>
						<div style="color: #7B7B7B;">
							{{item.createdDate.split(' ')[0]}}&nbsp;&nbsp;{{item.attributeName}}:{{item.sortName}}
						</div>
						<div v-html="item.evaluateContent">
							
						</div>
					</div>
				</div>
				<div class="detail-content-body1-comment-more" @click="route('commentMore')">
					查看更多评论
				</div>
			</div>
		</div> -->
        <!--<div class="detail-more">
			<div class="detail-more-title">
				<div></div>
				<div>更多精选产品</div>
			</div>
			<div class="detail-more-list">
				<div class="detail-more-list-item">
					<div class="detail-more-list-top">
						<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@2x.png"/>
					</div>
					<div class="detail-more-list-bottom">
						<div class="detail-more-list-title">
							萨达所大所大所大所多
						</div>
						<div class="detail-more-list-money">
							<div>
								￥<span>12.00</span>
							</div>
							<div>
								已售55
							</div>
						</div>
					</div>
				</div>
				<div class="detail-more-list-item">
					<div class="detail-more-list-top">
						<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@2x.png"/>
					</div>
					<div class="detail-more-list-bottom">
						<div class="detail-more-list-title">
							萨达所大所大所大所多
						</div>
						<div class="detail-more-list-money">
							<div>
								￥<span>12.00</span>
							</div>
							<div>
								已售55
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>-->
        <div style="width: 100%;height: 60px;"></div>
        <!--  v-if="shopShow || !commodityStatus" -->
      <div class="detail-purchase">
          	<div class="detail-purchase-icon" @click="route('customerCenter')">
				<img src="../../static/img/icon/find_icon/kefu@2x.png"/>
				<div>客服</div>
			</div>
			<div class="detail-purchase-icon1" @click="route('shoppingCart')">
				<img src="../../static/img/icon/find_icon/shoppingcart_faxian@2x.png"/>
				<div class="red-num">{{shoppingNum}}</div>
			</div>
		<!-- 	<div class="detail-purchase-icon2">
				<img src="../../static/img/icon/find_icon/shouchan@2x.png"/>
				<div>
					收藏
				</div>
			</div> -->
 
          <div class="btn addCart"   @tap='addShopping(info)'> 
            加入购物车
          </div>
           
          <div class="btn buyNow" @click="go('shoppingCart')">
            立即购买
          </div>
        </div>
        <transition name="slideup">
          <purchase-mask :diolog="show" :url="imgs" :list="attribute" @hide="hideMask" @addShopping="addShopping" @shop="shop"></purchase-mask>
        </transition>
        <v-share :dialog="shareShow" @hide="hide"></v-share>
        <div class="detail-fixed" @click="scrollTop">
          <div>返回顶部</div>
        </div>
      </div>
</template>
<script>
import purchaseMask from '../base/purchase'
import { getData } from '../service/getData'
import VShare from '../base/v-share'
import { Carousel,CarouselItem} from "iview"
export default {
  components: {
    purchaseMask,
    VShare,
    Carousel,
    CarouselItem
  },
  data() {
    return {
       carousel: [
      { id: 1, src: 'https://wx4.sinaimg.cn/mw690/005zpxwhly1fyy0vzi6w5j309q04edfz.jpg' },
      { id: 2, src: 'https://wx4.sinaimg.cn/mw690/005zpxwhly1fyy0vzi6w5j309q04edfz.jpg' }, 
      { id: 3, src: 'https://wx4.sinaimg.cn/mw690/005zpxwhly1fyy0vzi6w5j309q04edfz.jpg' }],
      speed:3000,
      index: ['商品详情', '销量和评价'],
      tabId: 0,
      show: false,
      shopShow: false,
      shoppingNum: 0,
      index2: [{
        name: '全部',
        evaluateList: [],
        num: 0
      }, {
        name: '好评',
        evaluateList: [],
        num: 0
      }, {
        name: '中评',
        evaluateList: [],
        num: 0
      }, {
        name: '差评',
        evaluateList: [],
        num: 0
      }],
      tabIndex: 0,
      info: {
        commodityName: '红色太阳花盆栽',
        desc: '功能特效不仅仅可以美化美观,还能净化空气,功能特效不仅仅可以美化美观,还能净化空气',
        commodityPrice: "99.99"
      },
      chosedGood:[],
      attribute: [],
      imgs: '',
      firstImg: '',
      lastImg: '',
      commodityStatus: true,
      commonCount: {},
      shareShow: false
    }
  },
  methods: {
    go(src){
       this.route('shoppingCart')
    },
    tabItem(index) { //商品详情tab
      this.tabId = index
    },
    tabItem1(index) { //评论tab
      this.tabIndex = index
    },
    hideMask() { //商品属性
      this.show = false
    },
    hide() { //隐藏
      this.shareShow = false
    },
    
   buyNow(){
     this.route('shoppingCart');
   },
    addShopping(info) { //加入购物车
      let that=this;
      getData('/shoppingtrolley/addCommodityOnShoppingApi', {
         userId: sessionStorage.userId,
         commodityId: this.$route.params.id,
         attributeId: info.commodityStatus,
         sortId: info.auditStatus,
         buyCount:1
      }).then(d => {
        that.$Message.info(d.msg)
        if (d.code = 1) {
          
        } else {
          alert(d.msg)
        }
      })
    },
    scrollTop() { //置顶
      //				var timer = setInterval(() => {
      //					window.scrollTo(0,$('.Router').scrollTop()-50);	
      //					if($('.Router').scrollTop() ==0) {
      //						clearInterval(timer)
      //					}
      //				},50)
      $('.Router').scrollTop(0)
    },
    init() { //默认加载
      getData('/commodity/getCommodityByIdApi', {
        userId: sessionStorage.userId,
        CommodityID: this.$route.params.id
      }).then(d => {
        var arr = []
        var newArr = []
        arr = d.commodity.titleUrl.split(',')
        arr.map(x => {
          if (x != '') {
            newArr.push(x)
          }
        })


        this.info = d.commodity
        this.info.titleUrl = newArr
        this.shoppingNum = d.shoppingCount
        this.imgs = newArr[0]
        this.commodityStatus = d.commodity.commodityStatus == 1 ? true : false
        this.shopShow = d.collectStatus == 0 ? true : false
        this.firstImg = this.info.titleUrl[0]
        this.lastImg = this.info.titleUrl[this.info.titleUrl.length - 1]
        this.index2[0].num = d.evaluateCount.allCount
        this.index2[1].num = d.evaluateCount.haoPingCount
        this.index2[2].num = d.evaluateCount.zhongPingCount
        this.index2[3].num = d.evaluateCount.chaPingCount
        this.$nextTick(() => {
          //获得slider插件对象
          //					    mui(".mui-slider").slider();
          var slider = mui(".mui-slider");
          slider.slider({
            interval: 5000
          });
        })
      })

      getData('/commodityattribute/getAttributeByCommodityIdApi', {
        commodityId: this.$route.params.id
      }).then(d => {
        console.log(d);
        this.attribute = d.sortList
      })
    },
    shop(info) { //立即购买
      getData('/shoppingtrolley/determineInventoryApi', {
        buyCount: info.num,
        userId: sessionStorage.userId,
        CommodityID: this.$route.params.id,
        CommoditySortID: info.CommoditySortID
      }).then(d => {
        if (d.code == 1) {
          info.id = this.$route.params.id
          this.route('order', '', 'shop', JSON.stringify(info))
        } else {
          alert('库存不够或者购买上限')
        }
      })
    }
  },
  mounted() {
    this.init()
    this.$nextTick(() => {
      //获得slider插件对象
      mui(".mui-slider").slider();
      var slider = mui(".mui-slider");
      slider.slider({
        interval: 1000
      });
    })
  },
  watch: {
    tabId(val) {
      if (val == 1) {
        getData('/evaluate/getEvaluateByCommodityIdApi', {
          pn: 1,
          commodityId: this.$route.params.id,
          scoreType: 0
        }).then(d => {
          this.index2[0].evaluateList = d.pageInfo.list
        })
      }
    },
    tabIndex(index) {
      if (index == 0) {
        getData('/evaluate/getEvaluateByCommodityIdApi', {
          pn: 1,
          commodityId: this.$route.params.id,
          scoreType: 0
        }).then(d => {
          this.index2[0].evaluateList = d.pageInfo.list
        })
      } else if (index == 1) {
        getData('/evaluate/getEvaluateByCommodityIdApi', {
          pn: 1,
          commodityId: this.$route.params.id,
          scoreType: 1
        }).then(d => {
          this.index2[1].evaluateList = d.pageInfo.list
        })
      } else if (index == 2) {
        getData('/evaluate/getEvaluateByCommodityIdApi', {
          pn: 1,
          commodityId: this.$route.params.id,
          scoreType: 2
        }).then(d => {
          this.index2[2].evaluateList = d.pageInfo.list
        })
      } else if (index == 3) {
        getData('/evaluate/getEvaluateByCommodityIdApi', {
          pn: 1,
          commodityId: this.$route.params.id,
          scoreType: 3
        }).then(d => {
          this.index2[3].evaluateList = d.pageInfo.list
        })
      }
    }
  }
}

</script>
<style lang="less" scoped>
.good_img img {
  width: 100%;
}

.detail-info {
  margin-top: 10px;
  background-color: #fff;
  padding-top: 10px;
}

.borderLine {
  width: 80%;
  border-bottom: 1px solid #E0E0E0;
  margin: 0 auto;
  display: flex;
}

.borderLine>div {
  box-sizing: border-box;
  flex: 1;
  line-height: 35px;
  font-size: 14px;
}

.el-carousel img {
  width: 100%;
  height: 200px;
}

//my
.slideup-enter-active {
  animation-name: slideInUp;
  animation-duration: .2s;
  animation-fill-mode: both
}

.slideup-leave-active {
  animation-name: slideOutDown;
  animation-duration: .5s;
  animation-fill-mode: both
}

@keyframes slideInUp {
  0% {
    transform: translate3d(0, 100%, 0);
    visibility: visible
  }

  to {
    transform: translateZ(0)
  }
}

@keyframes slideOutDown {
  0% {
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0)
  }
}

.delay-leave-active {
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -o-animation-delay: .2s;
  animation-delay: .2s;
}

#commodityDetail {
  background: #eee;
  overflow-y: scroll;
}

.detail-header-img {
  width: 100%;
  height: 250px;
  background: #eee;

  img {
    width: 100%;
    height: 100%;
  }
}

.detail-text {
  padding: 15px;
  font-size: 12px;
  background: #fff;

  .detail-text-title {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
  }

  .detail-text-desc {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .detail-text-money {
    color: red;
    font-size: 18px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    color: red;
    font-weight: bold;

    div:last-child {}

    // span:first-child {
    // 	font-size: 16px;
    // 	font-weight: bold;
    // 	margin-right: 10px;
    // }
    // span:last-child {
    // 	color: #7b7b7b;
    // 	text-decoration: line-through;
    // }
  }

  .detail-text-bottom {
    display: flex;
    justify-content: space-between;

    div:nth-child(2) {
      width: 100px;
    }
  }
}

.detail-attribute {
  margin: 10px 0;
  background: #FFFFFF;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;

  div:last-child {
    width: 10px;
    height: 15px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.detail-content {
  background: #fff;

  .detail-content-tab {
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    font-size: 14px;

    .detail-content-tab-item {
      flex: 1;
      padding: 10px 0 0;
      text-align: center;

      .detail-content-tab-item-name {
        display: inline-block;
        margin: 0 auto;
        padding: 0 10px 10px;
      }
    }

    .active {
      color: #c9eb59 !important;
      font-weight: bold;
      border-bottom: 2px solid #c9eb59 !important;
    }
  }

  .detail-content-body {
    width: 100%;

    img {
      width: 100%;
    }
  }

  .detail-content-body1 {

    .detail-content-body1-tab {
      padding: 10px;
      display: flex;
      font-size: 12px;
      text-align: center;
      border-bottom: 1px solid #eee;

      .detail-content-body1-tab-item {
        padding: 5px 10px;
        background: #eee;
        border-radius: 5px;
        margin-right: 10px;

        &:last-child {
          margin: 0;
        }
      }

      .active {
        background: #7B7B7B;
        color: #fff;
      }
    }

    .detail-content-body1-comment {

      .detail-content-body1-comment-item {
        padding: 10px;
        border-bottom: 1px solid #eee;

        .detail-content-body1-top {
          display: flex;
          align-items: center;

          img {
            border-radius: 50%;
            width: 40px;
            height: 40px;
            margin-right: 10px;
          }

          div {
            font-size: 14px;
            margin: 0;
            flex: 5;
          }
        }

        div {
          margin-bottom: 10px;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          display: -webkit-box;
          word-break: break-all;
          text-overflow: ellipsis;
        }

        .detail-content-body1-bottom {
          font-size: 12px;
        }
      }
    }

    .detail-content-body1-comment-more {
      padding: 10px 0;
      text-align: center;
      border-top: 1px solid #eee;
      font-size: 12px;
    }
  }
}

.detail-more {
  padding: 10px;
  background: #fff;
  margin-top: 10px;
  margin-bottom: 50px;

  .detail-more-title {
    height: 18px;
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-bottom: 10px;

    div:first-child {
      width: 4px;
      height: 100%;
      background: slateblue;
      margin-right: 10px;
    }
  }

  .detail-more-list {
    display: flex;

    .detail-more-list-item {
      flex: 1;
      border: 1px solid #eee;
      margin-right: 5px;
      font-size: 12px;

      .detail-more-list-top {
        width: 100%;
        height: 150px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .detail-more-list-bottom {
        padding: 10px 5px;

        .detail-more-list-title {
          height: 60px;
        }

        .detail-more-list-money {
          width: 100%;
          display: flex;
          justify-content: space-between;

          div:first-child {
            color: red;

            span {
              font-size: 15px;
              font-weight: bold;
            }
          }

          div:last-child {
            color: #7B7B7B;
          }
        }
      }

      &:last-child {
        margin: 0;
      }
    }
  }
}

.detail-purchase {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  height: 50px;
  display: flex;
  text-align: center;
  background: #fff;
  border-top: 1px solid #EEEEEE;

  .detail-purchase-icon {
    flex: 1;
    font-size: 10px;
    border-right: 1px solid #eee;
    padding: 10px 5px;
    display: flex;
    align-items: center;
    flex-direction: column;

    img {
      width: 15px;
      height: 15px;
    }
  }

  .detail-purchase-icon1 {
    flex: 1;
    border-right: 1px solid #eee;
    padding: 15px 2px;
    position: relative;

    img {
      width: 20px;
      height: 20px;
    }

    .red-num {
      position: absolute;
      top: 10px;
      right: 1px;
      width: 15px;
      height: 15px;
      font-size: 8px;
      line-height: 15px;
      border-radius: 50%;
      background: red;
      color: #FFFFFF;
    }
  }

  .detail-purchase-icon2 {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 10px;
    border-right: 1px solid #eee;
    padding: 10px 2px;

    img {
      width: 15px;
      height: 15px;
    }
  }

  .addCart {
    flex: 3;
    line-height: 50px;
    background: #FFFFFF;
    color: #3E3E3E;
  }

  .buyNow {
    flex: 3;
    line-height: 50px;
    color: #fff;
    background: #BCE211;
  }
}

.detail-fixed {
  position: fixed;
  bottom: 70px;
  right: 20px;
  font-size: 12px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
}

</style>
